9/2/2021 Guide Docs | LiveCode 


Map Widget 


The map widget displays an interactive map control. It uses the Google Maps API on Android, and the Mapkit 
Framework on iOS and 64bit Mac. 


Mac/iOS 
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Android 


Creating a Map 


A map widget can be created by dragging it out from the Tools Palette, where it appears with the following icon: 
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create widget as "com.livecode.widget.native.map" 


Alternatively it can be created in script using: 


Using the Map Widget 


Properties 


In addition to the basic map view which can be navigated using the standard gestures, the map widget can display 
markers and polyline overlays. 


Both of these properties are arrays, with a key for each marker or polyline, and with subkeys specifying the individual 
properties of that marker or polyline. 


For example, here is some code setting a marker and a polyline on a map: 
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local tMarkers 
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set the markers of widget 1 to tMarkers 














local tPolylines 
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set the polylines of widget 1 to tPolylines 








This produces the following: 
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The array key used to specify a marker is its fag, which is used to identify the marker when sending 
the markerSelected message when it is selected. 


The region property consists of the centerCoordinates property followed by the span property - i.e. itis a 
comma delimited list specifying the coordinates of the center of the map (latitude and longitude, in degrees north and 
east respectively) and the vertical and horizontal delta in degrees from the to the sides of the map view. 


Messages 


The map widget sends the following messages: 


e markerSelected pMarkerTag - Sent when a map marker is selected. pMarkerTag is the selected marker's tag 
(i.e. the array key corresponding to the marker) 
e regionChanged - Sent when the map region changes due to user gestures. 


Deploying on Android 


In order to use the map widget on Android, you must create a Google Maps V2 API key for your app, and set it in the 
standalone settings for the map widget via the cog icon in the Inclusions pane of the standalone settings stack. 
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When the cog icon is clicked, the following window will pop up: 
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Simply enter your API key and you are ready to deploy to Android. 
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